<template>
  <div class="mix-container">
    <div class="i-cont">
      <el-input v-model="content" type="textarea" ref='textarea' :autosize="inputAutosize" @focus="inputFocus" clearable
        resize="none" placeholder="请输入内容"></el-input>
    </div>
    <section v-if="imgFiles.length > 0" class="img-cont">
      <flexbox wrap="wrap">
        <div class="img-item" v-for="(item, index) in imgFiles" :key="index"
          :style="{ 'background-image': 'url('+item.path+')' }" @mouseover="mouseImgOver(item, index)"
          @mouseleave="mouseImgLeave(item, index)">
          <div v-if="item.showDelete" class="img-delete" @click="deleteImgOrFile('image', item, index)">×</div>
        </div>
        <div class="img-item-add">
          <input type="file" class="img-item-iput" accept="image/*" multiple @change="uploadFile">
        </div>
      </flexbox>
      <div class="img-bar" @click="deleteAllImg">全部删除</div>
    </section>
    <section v-if="files.length > 0" class="file-cont">
      <flexbox class="f-header">
        <img class="f-logo" src="@/assets/img/send_file.png">
        <div class="f-name">附件</div>
      </flexbox>
      <div class="f-body">
        <flexbox class="f-item" v-for="(item, index) in files" :key="index">
          <img class="f-img" :src="item.icon">
          <div class="f-name">{{item.name+'('+item.size+')'}}</div>
          <div class="close-button" @click="deleteImgOrFile('file', item, index)">×</div>
        </flexbox>
      </div>
      <div class="img-bar" @click="files=[]">全部删除</div>
    </section>
    <section v-if="business.length > 0" class="c-cont">
      <flexbox class="c-header">
        <img class="c-logo" src="@/assets/img/send_business.png">
        <div class="c-name">商机</div>
      </flexbox>
      <div class="c-body">
        <flexbox wrap="wrap">
          <flexbox class="c-item" v-for="(item, index) in business" :key="index">
            <div class="c-item-name">{{item.name}}</div>
            <div class="c-item-close" @click="business.splice(index, 1)">×</div>
          </flexbox>
        </flexbox>
      </div>
    </section>
    <section v-if="contacts.length > 0" class="c-cont">
      <flexbox class="c-header">
        <img class="c-logo" src="@/assets/img/send_contacts.png">
        <div class="c-name">联系人</div>
      </flexbox>
      <div class="c-body">
        <flexbox wrap="wrap">
          <flexbox class="c-item" v-for="(item, index) in contacts" :key="index">
            <div class="c-item-name">{{item.name}}</div>
            <div class="c-item-close" @click="contacts.splice(index, 1)">×</div>
          </flexbox>
        </flexbox>
      </div>
    </section>
    <flexbox class="bar-cont">
      <template v-for="(item, index) in barItems">
        <flexbox v-if="item.type=='img'||item.type=='file'" class="bar-item" :key="index"
          @click.native="barClick(item)">
          <input type="file" class="bar-input" :accept="item.data" multiple @change="uploadFile">
          <img class="bar-img" :src="item.img">
          <div class="bar-title">{{item.title}}</div>
        </flexbox>
        <el-popover v-else :key="index" v-model="item.show" placement="bottom" width="700"
          popper-class="no-padding-popover" trigger="click">
          <crm-relative :show="item.show" :radio="false" ref="crmrelative"
            :action="{ type: 'condition', data: { form_type: 'customer', customer_id: id } }"
            :selectedData="item.type == 'business' ? { 'business': business } : { 'contacts': contacts }"
            :crm-type="item.type" @close="item.show=false" @changeCheckout="checkRelativeInfos">
          </crm-relative>
          <flexbox slot="reference" class="bar-item" @click.native="barClick(item)">
            <img class="bar-img" :src="item.img">
            <div class="bar-title">{{item.title}}</div>
          </flexbox>
        </el-popover>
      </template>
    </flexbox>
  </div>
</template>

<script>
  import {
    fileSize,
    getFileTypeIcon
  } from '@/utils/index'
  import {
    crmFileSave,
    crmFileDelete
  } from '@/api/common'
  import CrmRelative from '@/components/CreateCom/CrmRelative'

  export default {
    /** 跟进记录 下的 添加 有添加框的都需要*/
    name: 'mix-add',
    components: {
      CrmRelative
    },
    props: {
      /** 展示相关商机关联 */
      showRelativeBusiness: {
        type: Boolean,
        default: false
      },
      /** 展示相关商机关联 */
      showRelativeContacts: {
        type: Boolean,
        default: false
      },
      /** 模块ID */
      id: [String, Number],
      /** 没有值就是全部类型 有值就是当个类型 */
      crmType: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        /** 输入法 */
        content: '',
        inputAutosize: {
          minRows: 1,
          maxRows: 6
        }, // 默认1 聚焦是 变成3
        /** 快捷添加 */
        barItems: [{
            img: require('@/assets/img/send_img.png'),
            title: '图片',
            type: 'img',
            data: 'image/*'
          },
          {
            img: require('@/assets/img/send_file.png'),
            title: '附件',
            type: 'file',
            data: '*.*'
          }
        ],
        /** 图片信息 */
        imgFiles: [],
        /** 图片信息 */
        files: [],
        /** 关联商机信息 */
        business: [],
        /** 关联联系人信息 */
        contacts: [],
        /** 展示关联弹窗 */
        showRelativeType: ''
      }
    },
    computed: {},
    mounted() {
      /** 控制展示关联商机 和 联系人 */
      if (this.showRelativeBusiness) {
        // this.barItems.push({
        //   img: require('@/assets/img/send_business.png'),
        //   title: '关联商机',
        //   type: 'business',
        //   show: false
        // })
      }

      if (this.showRelativeContacts) {
        this.barItems.push({
          img: require('@/assets/img/send_contacts.png'),
          title: '关联联系人',
          type: 'contacts',
          show: false
        })
      }
      /** 父组件通知子组件提交数据 */
      /**将拼接好的数据回调父组件 this.$refs.child.$emit('submit-info');  调用*/
      this.$on('submit-info', function () {
        this.$emit('mixadd-info', {
          content: this.content,
          files: this.files,
          images: this.imgFiles,
          business: this.business,
          contacts: this.contacts
        })
      })
    },
    methods: {
      resetInfo() {
        /** 输入法 */
        this.content = ''
        /** 图片信息 */
        this.imgFiles = []
        /** 图片信息 */
        this.files = []
        /** 关联商机信息 */
        this.business = []
        /** 关联联系人信息 */
        this.contacts = []
        /** 展示关联弹窗 */
        this.showRelativeType = ''
      },
      /** 快捷添加按钮 */
      checkRelativeInfos(data) {
        if (this.showRelativeType == 'business') {
          this.business = data.data
        } else if (this.showRelativeType == 'contacts') {
          this.contacts = data.data
        }
      },
      barClick(item) {
        if (item.type == 'business') {
          this.showRelativeType = item.type
          item.show = true
        } else if (item.type == 'contacts') {
          this.showRelativeType = item.type
          item.show = true
        }
      },
      /** 图片选择出发 */
      uploadFile(event) {
        var files = event.target.files
        var self = this
        for (let index = 0; index < files.length; index++) {
          const file = files[index]
          // if (file.type.indexOf('image') != -1) {
          var params = {}
          params.module_id = this.id
          params.module = 'crm_' + this.crmType
          if (event.target.accept == 'image/*') {
            params['img[]'] = file
          } else if (event.target.accept == '*.*') {
            params['file[]'] = file
          }
          crmFileSave(params)
            .then(res => {
              /**
                           * "key": 0,
                              "name": "yun.jpg",
                              "status": 1,
                              "path": "uploads20181205\\1aee9b6b70a0601f48415c4ba9325274.jpg",
                              "file_id": "21"
                           */
              res.data.forEach((element, index) => {
                element['size'] = fileSize(file.size)
                if (event.target.accept == 'image/*') {
                  self.imgFiles.push(element)
                } else if (event.target.accept == '*.*') {
                  element['icon'] = getFileTypeIcon(file)
                  self.files.push(element)
                }
              })
            })
            .catch(() => {})
          // }
        }
        event.target.value = ''
      },
      /** 删除全部图片 */
      deleteAllImg() {
        this.imgFiles = []
      },
      deleteImgOrFile(type, item, index) {
        crmFileDelete({
            save_name: item.save_name,
            module_id: this.id,
            module: 'crm_' + this.crmType
          })
          .then(res => {
            if (type == 'image') {
              this.imgFiles.splice(index, 1)
            } else {
              this.files.splice(index, 1)
            }
            this.$message.success(res.data)
          })
          .catch(() => {})
      },
      /** 鼠标移入和移除 图片区域 */
      mouseImgOver(item, index) {
        item.showDelete = true
        this.$set(this.imgFiles, index, item)
      },
      mouseImgLeave(item, index) {
        item.showDelete = false
        this.$set(this.imgFiles, index, item)
      },
      inputFocus() {
        this.inputAutosize = {
          minRows: 3,
          maxRows: 6
        }
        this.$nextTick(() => {
          this.$refs.textarea.resizeTextarea()
        })
      }
    },

    beforeDestroy() {
      this.$off('submit-info')
    }
  }

</script>

<style lang="scss" scoped>
  .mix-container {
    position: relative;
    border: 1px solid #e6e6e6;
    border-radius: 3px;

    .i-cont {
      padding: 8px 10px;
    }
  }

  .i-cont /deep/ .el-textarea__inner {
    border: none;
    padding: 0;
  }

  /** 图片  */
  .img-cont {
    padding: 0 10px;
    margin-bottom: 15px;

    .img-item {
      width: 98px;
      height: 98px;
      border: 1px solid #ccc;
      display: inline-block;
      margin: 0 4px 4px 0;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      position: relative;

      .img-delete {
        position: absolute;
        cursor: pointer;
        top: 0;
        right: 0;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 17px;
        background-color: #666;
        color: white;
      }
    }

    .img-item-add {
      width: 98px;
      height: 98px;
      line-height: 98px;
      font-size: 60px;
      color: #ccc;
      text-align: center;
      margin: 0 4px 4px 0;
      cursor: pointer;
      display: inline-block;
      border-width: 1px;
      border-style: dashed;
      border-color: #ddd;
      position: relative;
      font-weight: 100;

      .img-item-iput {
        position: absolute;
        top: 0;
        right: 0;
        height: 98px;
        width: 98px;
        opacity: 0;
        cursor: pointer;
      }
    }

    .img-item-add:before {
      width: 2px;
      height: 39.5px;
      content: ' ';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #2888e4;
    }

    .img-item-add:after {
      width: 39.5px;
      height: 2px;
      content: ' ';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #2888e4;
    }

    .img-bar {
      color: #5a8ae2;
      font-size: 12px;
      padding: 5px 0;
      cursor: pointer;
    }
  }

  /** 附件  */
  .file-cont {
    padding: 0 10px;
    margin: 0 10px 15px;
    border: 1px dashed #dfdfdf;

    .f-header {
      padding: 8px 0 15px;

      .f-logo {
        position: block;
        width: 15px;
        height: 15px;
        margin-right: 8px;
      }

      .f-name {
        color: #777;
        font-size: 12px;
      }
    }

    .f-body {
      .f-item {
        padding: 3px 0;
        height: 25px;

        .f-img {
          position: block;
          width: 15px;
          height: 15px;
          margin-right: 8px;
        }

        .f-name {
          color: #666;
          font-size: 12px;
        }
      }
    }

    .img-bar {
      color: #5a8ae2;
      font-size: 12px;
      padding: 5px 0;
    }
  }

  /** CRM  */
  .c-cont {
    padding: 0 10px;
    margin: 0 10px 15px;
    border: 1px dashed #dfdfdf;

    .c-header {
      padding: 8px 0 15px;

      .c-logo {
        position: block;
        width: 15px;
        height: 15px;
        margin-right: 8px;
      }

      .c-name {
        color: #777;
        font-size: 12px;
      }
    }

    .c-body {
      margin-bottom: 10px;

      .c-item {
        height: 24px;
        border-radius: 12px;
        padding: 0 8px;
        margin: 0 5px 5px 0;
        background-color: #3487e2;
        color: white;
        width: auto;

        .c-item-name {
          font-size: 12px;
        }

        .c-item-close {
          padding-left: 5px;
          font-size: 17px;
        }
      }
    }
  }

  /** 底部bar  */
  .bar-cont {
    background-color: #f9f9f9;
    padding: 8px 15px;

    .bar-item {
      width: auto;
      padding-right: 20px;
      position: relative;
      cursor: pointer;

      .bar-input {
        position: absolute;
        top: 0;
        right: 0;
        height: 15px;
        width: 68px;
        opacity: 0;
        font-size: 0;
        cursor: pointer;
      }

      .bar-img {
        display: block;
        width: 15px;
        height: 15px;
        margin-right: 8px;
      }

      .bar-title {
        color: #777;
        font-size: 12px;
      }
    }
  }

  /** 关闭按钮  */
  .close-button {
    width: 30px;
    line-height: 16px;
    cursor: pointer;
    color: #ccc;
    height: 16px;
    font-size: 17px;
    text-align: center;
  }

</style>
